import React, { useEffect, useState, useRef } from "react";
import Cropper from "react-cropper";
import { Toast, Button } from "antd-mobile";
import { useHistory, useParams } from "react-router-dom";
import ajax from "./axios";
import "cropperjs/dist/cropper.css";
import { ImageUploader, TextArea } from "antd-mobile";
const tijiao = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/tijiao.png";
const shnagchuan =
  "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/shangchuan.png";
const load_jia =
  "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/load_jia.png";
const load_x = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/load_x.png";
const ok = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/ok.png";
const X = "https://lcz-quna.oss-cn-beijing.aliyuncs.com/img/x.png";
function Home() {
  const history = useHistory();
  const [fileList, setFileList] = useState([]);
  const [isImg, setIsImg] = useState(false);
  const [myimg, setMyimg] = useState("");
  const [value, setValue] = useState("");
  const [isLoad, setLoad] = useState(false);
  const { type } = useParams();
  const input = useRef(null);
  const cropperRef = useRef(null); // 创建裁剪器的引用
  const onCrop = () => {
    const cropper = cropperRef.current?.cropper;
    const fileListNew = JSON.parse(JSON.stringify(fileList));
    cropper.getCroppedCanvas().toBlob((f) => {
      setMyimg(f);
    });
    fileListNew[0].url = cropper.getCroppedCanvas().toDataURL();
    setFileList(fileListNew);
    setIsImg(false);
  };
  const onOpen = () => {
    setFileList([]);
    const nativeInput = input.current?.nativeElement;
    if (nativeInput) {
      nativeInput.click();
    }
  };
  const onChange = (value) => {
    setValue(value);
  };
  const onPicture = () => {
    // minitiaozhan/siqingzhufu
    if (isLoad) return;
    if (!myimg) {
      Toast.show({
        position: "top",
        content: "请上传图片",
      });
    } else if (!value) {
      Toast.show({
        position: "top",
        content: "请填写祝福语",
      });
    } else {
      setLoad(true);
      let formData = new FormData();
      // 添加要上传的文件
      formData.append("file", myimg);
      formData.append("activityType", type || "minitiaozhan");
      formData.append("description", value);
      console.log(formData);
      ajax("post", "/file/upload/picture", {}, formData).then((res) => {
        setLoad(false);
        if (res.success) {
          history.go(-1);
          Toast.show({
            position: "top",
            content: "上传成功！",
          });
        } else {
          Toast.show({
            position: "top",
            content: res.data || "含敏感词，请修改后提交！",
          });
        }
      });
    }
  };
  return (
    <div className="Load_box">
      <div className="top_title">
        <img
          onClick={() => {
            history.go(-1);
          }}
          src={X}
        />
        <img onClick={onOpen} src={shnagchuan} />
      </div>
      <div className="load_img_box">
        <img className="load_jia" onClick={onOpen} src={load_jia}></img>
        {fileList[0] && (
          <img
            className="load_my_x"
            onClick={() => {
              setFileList([]);
            }}
            src={load_x}
          ></img>
        )}

        <img className="main_img" src={fileList[0] && fileList[0].url}></img>
      </div>
      <div className="load_input">
        <div className="load_input_title">祝福语</div>
        <div className="load_input_text">
          <TextArea
            placeholder="字数限制100字"
            autoSize={{ rows: 3, maxRows: 3 }}
            maxLength={100}
            onChange={onChange}
            value={value}
          />
        </div>
      </div>
      <div className="load_ttt">*照片和祝福语须全部填写</div>
      <div className="tianjia_box">
        <img onClick={onPicture} src={tijiao} />
      </div>

      <ImageUploader
        style={{ display: "none" }}
        ref={input}
        value={fileList}
        onChange={setFileList}
        maxCount={1}
        upload={async (file) => {
          let formData = new FormData();
          console.log(file);
          formData.append("file", file);
          setIsImg(true);
          return {
            url: URL.createObjectURL(file),
          };
        }}
      >
        <img
          style={{ width: "100px", height: "100px" }}
          src={MYIMGUTL + "/img/upload_button.png"}
        />
      </ImageUploader>
      {fileList[0] && fileList[0].url && isImg && (
        <div className="CropperBox">
          <Cropper
            ref={cropperRef}
            src={fileList[0] && fileList[0].url}
            style={{ height: 400, width: "100%" }}
            aspectRatio={3 / 4}
            guides={false}
            // crop={onCrop}
          />
          <div className="CropperBox_b">
            <img onClick={onCrop} style={{ height: "40px" }} src={ok} />
          </div>
        </div>
      )}
      {isLoad && <div className="jaizai">加载中</div>}
    </div>
  );
}

export default Home;
